/**
 * 载入项目引导文件
 */
require('./bootstrap');

window.Vue = require('vue');
//分页
import pagination from 'vue-bootstrap-pagination'
//瀑布流
import {VueMasonryPlugin} from 'vue-masonry';
Vue.use(VueMasonryPlugin)
//树形select选择框
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
//素材预览组件
Vue.component('MaterialPreview', require('../components/MaterialPreview.vue'));

let box;

let material_empty = {
    'material_id': 0,
    'cat_id' : 0,
    'title':'',
    'description':'',
    'view_url':'',
    'is_forever':1,
};

const app = new Vue({
    el: '#wrapper',
    data: {
        material_list: [],
        materialCurData : {},
        page_params:page_params,
        grid:null,
        masonryOptions:{//瀑布流配置
            itemSelector: '.grid-item',
        },
        searchParams:{//搜索参数
            keyword:'',
            catId:null,
        },
        cat_list: page_params.catList,//分类选择项列表
        catNormalizer(node){
            return {
                id:node.cat_id,
                label:node.name,
                children: node.children,
            }
        },
        uploader:null,
        pagination: {
            total: 0,
            per_page: 15,    // required
            current_page: 1, // required
            last_page: 0,    // required
            from: 1,
            to: 12
        },
        paginationOptions: {
            offset: 4,
            previousText: '上一页',
            nextText: '下一页',
            alwaysShowPrevNext: true,
        }
    },
    watch:{
        material_list:function () {
            let _this = this;
            if (_.isEmpty(_this.grid)) {
                _this.grid = $('.grid').masonry(_this.masonryOptions)
            }
        },
        materialCurData:function(){
            let _this = this;
            //封面图上传组件初始化
            this.uploader = utils.webUploader('voice', {'uploadBtnText':'选择音频'});
            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            this.uploader.on('uploadSuccess', function(file, response ) {
                if (response.status == 'success' && _.isEmpty(response.data) == false){
                    _this.materialCurData.view_url = response.data.view_url;
                }else{
                    utils.showToastr({'status':'error','title':'上传失败','message':file.message});
                }
            });
            // 文件上传失败，显示上传出错。
            this.uploader.on('uploadError', function( file ) {
                layer.close(loadBox);
                utils.showToastr({'status':'error','title':'上传失败','message':'文件上传失败'});
            });
        }
    },
    mounted:function(){

    },
    methods:{
        query:function(page,pageSize){//查询分页
            let queryData = _.merge(this.searchParams, {
                page: this.pagination.current_page,
                pageSize: this.pagination.per_page,
            });
            utils.ajaxGet(page_params.url_list, queryData,
                (response, params) => {
                    this.material_list = response.data.data;
                    this.pagination.total = response.data.total;
                    this.pagination.current_page = response.data.current_page;
                    this.pagination.last_page = response.data.last_page;
                    this.$nextTick(()=>{
                        this.$redrawVueMasonry();
                    })
                }
            );
        },
        onPageClick:function (event, originalEvent, type, page){
            let _this = this;
            this.query(page, _this.pageSize);
        },
        add:function (){
            this.materialCurData = material_empty;
            box = layer.open({
                type: 1,
                title: '新增二维码',
                shadeClose: true,
                anim: 2,
                skin: 'layui-layer-molv', //加上边框
                area: ['550px', '510px'], //宽高
                content: $('#box-form')
            });
        },
        edit:function (index){
            this.materialCurData = this.material_list[index];
            box = layer.open({
                type: 1,
                title: '新增二维码',
                shadeClose: true,
                anim: 2,
                skin: 'layui-layer-molv', //加上边框
                area: ['550px', '510px'], //宽高
                content: $('#box-form')
            });
        },
        upwx:function (materialId) {
            let _this = this;
            utils.confirm(page_params.url_upwx, {'id':materialId}, (response, data) =>{
                utils.showToastr(response.data);
                _this.query(_this.page, _this.pageSize);
            },'确定上传到微信端么？','该上传过程比较耗时，将会异步执行');
        },
        del:function (materialId) {
            let _this = this;
            utils.confirm(page_params.url_del,{'id':materialId}, (response, data) =>{
                utils.showToastr(response.data);
                _this.query(_this.page, _this.pageSize);
            },'确定删除该素材么？','删除后将不可恢复');
        },
        materialSave:function(){
            let loadBox = layer.load(1, {
                shade: [0.3,'#fff'] //0.1透明度的白色背景
            });
            let url_save= this.materialCurData.material_id ? page_params.url_edit : page_params.url_add;
            utils.ajaxPost(url_save, this.materialCurData, (response, data) => {
                layer.close(loadBox);
                data = response.data;
                utils.showToastr(data);
                if (data.status == 'success'){
                    layer.close(box);
                    this.query(this.page, this.pageSize);
                }
            });
        },
        search:function () {
            this.query(this.page, this.pageSize);
        },
        sync:function (){
            let _this = this;
            utils.confirm(page_params.url_sync,{}, (response, data) =>{
                utils.showToastr(response.data);
                _this.query(_this.page, _this.pageSize);
            },'你确定拉取微信端素材么？','该操作将会覆盖到本地数据库中已存在的图文素材,为了提高同步速度，建议先同步图片素材');
        },
    },
    components: {
        Treeselect,pagination
    },
    created:function () {
        this.query(this.page, this.pageSize);
    }
});